<template>
    <div class="list">
        <!--导航-->
        <smsheader :index='0' />
        <!-- 头部搜索 -->
        <header>
            <div class="filter-part">
                <div class="filter-item">
                    <i-button type="info" @click="addSms">
                        <i class = "iconfont icon-add" style="font-size:12px;margin-right:5px"></i>
                    </i-button>
                </div>
                <div class="filter-item">
                    <i-input class="input" v-model.trim="filterObj.title" placeholder="请输入标题"></i-input>
                </div>
                <div class="filter-item">
                    <i-input class="input" v-model.trim="filterObj.content" placeholder="请输入模板样例内容"></i-input>
                </div>
                <div class="filter-item">
                   <i-button type="primary" icon="ios-search" @click="handleSearch" style="width:51px;height:32px"></i-button>
                </div>
                <div class="filter-item">
                   <i-button @click="Reset" style="width:51px;height:32px">
                       <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
                   </i-button>
                </div>
            </div>
            
        </header>
        <!-- 列表 -->
        <div class="table">
            <Table
                border
                size="small" 
                :columns="columns" 
                :data="data"
                :loading="loading"
                no-data-text="未查询到符合条件的记录"
                stripe>
            </Table>
            <div class="page">
                <Page :total="count" :current='filterObj.pageNo' :page-size="filterObj.pageSize" show-total show-elevator @on-change="changePage" />
            </div>
        </div>
        <!-- 删除确认弹窗 -->
        <Modal
            v-model="showDelConfirmModal"
            title="短信模板"
            class="drugmanagement-commondrug-list-delModal">
            <p>删除后不可恢复，确认删除所短信模板吗？</p>
            <div slot="footer" class="buttonbox">
                <Button class="cancel-btn btn" @click="showDelConfirmModal = false">取消</Button>
                <Button class="save-btn btn" type="primary" :loading="delLoading" @click="handleDel">确认</Button>
            </div>
        </Modal>
        <!--添加短信模板-->
        <Modal
            v-model="modalStatus"
            :title="modalTitle"
            :mask-closable='false'
            footer-hide
            width='550'>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150">
                <FormItem label="标题" prop="title">
                    <Input v-model="formValidate.title" placeholder="请输入标题" style='width:300px;' maxlength="64"></Input>
                </FormItem>
                <FormItem label="模板类型" prop="type">
                    <Select v-model="formValidate.type" style="width:300px" @on-change="selpro($event)">
                        <Option v-for="(item, index) in followList" :value="item.smsId" :key="index" style='text-align:center;'>{{item.smsName}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="模板样例内容" prop="content">
                    <Input v-model="formValidate.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入模板样例内容" style="width:300px" maxlength="100"></Input>
                </FormItem>
                <FormItem label="模板内容(禁止修改)" prop="templateContent">
                    <Input v-model="formValidate.templateContent" type="textarea" :disabled="true" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入模板内容(禁止修改)" style="width:300px"></Input>
                </FormItem>
                <FormItem label="短信code码" prop="templateCode">
                    <Input v-model="formValidate.templateCode" placeholder="请输入短信code码" style="width:300px" maxlength="50"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')" style="width:75px;height:35px">
                        <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                    </Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">
                        <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                    </Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    import smsheader from "../smsheader";
    import api from "@/api/commonApi";
    const filterObj = {
        pageNo: 1,
        pageSize: '10',
        hospitalId:'',
        title: '',
        content: '',
        // sortDescs:[
        //     "id"
        // ]
    };
    export default {
        components: {
            smsheader
        },
    data() {
        return {
            filterObj: this.deepClone(filterObj),
            count: 0,
            loading: false,
            delBtnLoading: false,
            seachObj:{
                pageNo: 1,
                pageSize: 10,
                title: '',
                content: '',
                // hospitalId: sessionStorage.getItem('hospitalId'),s
                // sortDescs:[
                //     "id"
                // ]
            },
            columns: [
                {type: 'iNum', title: '排序', width: 80, align: 'center',
                    render: (h, params) => {
                        let iNum = (this.filterObj.pageNo-1)*this.filterObj.pageSize + params.index +1;
                        return h("span", iNum);
                    }
                },
                {title:"标题", key:"title", align: "center"},
                {title:"模板类型", key:"type", align: "center",
                    render:(h,params)=>{  
                        let tmpStr = "";                     
                        let status = params.row.type;
                        if(status == 1){
                            tmpStr = '验证码'
                        }else if(status == 2){
                            tmpStr = '患者端接诊提示'
                        }else if(status == 3){
                            tmpStr = '患者端退诊'
                        }else if(status == 4){
                            tmpStr = '患者预约挂号成功通知'
                        }else if(status == 5){
                            tmpStr = '患者预约挂号退款成功'
                        }else if(status == 6){
                            tmpStr = '患者不缴费短信模板退号'
                        }else if(status == 7){
                            tmpStr = '患者退诊提示（三小时未接诊）'
                        }else if(status == 8){
                            tmpStr = '医生端待接诊提示'
                        }else if(status == 9){
                            tmpStr = '医生端2小时未接诊提示'
                        }else if(status == 10){
                            tmpStr = '医生端未接诊退诊提示'
                        }else if(status == 11){
                            tmpStr = '医生端实名认证通过提示'
                        }else if(status == 12){
                            tmpStr = '医生端实名认证未通过提示'
                        }else if(status == 13){
                            tmpStr = '处方拒绝提示'
                        }else if(status == 14){
                            tmpStr = '家医签约成功'
                        }else if(status == 15){
                            tmpStr = '家医签约拒绝'
                        }else if(status == 16){
                            tmpStr = '患者取药短信'
                        }else if(status == 17){
                            tmpStr = '双向转诊-接诊机构配置管理员审批同意后-申请医生'
                        }else if(status == 18){
                            tmpStr = '双向转诊-接诊机构配置管理员审批同意后-接诊医生'
                        }else if(status == 19){
                            tmpStr = '双向转诊-接诊机构配置管理员审批同意后-患者'
                        }else if(status == 20){
                            tmpStr = '远程门诊-申请医生提交远程门诊订单后-接诊医生'
                        }else if(status == 21){
                            tmpStr = '远程门诊-接诊医生确认远程门诊订单后-申请医生'
                        }else if(status == 22){
                            tmpStr = '远程门诊-接诊医生确认远程门诊订单后-患者'
                        }else if(status == 23){
                            tmpStr = '远程门诊-接诊医生拒绝远程门诊订单后'
                        }else if(status == 24){
                            tmpStr = '远程门诊-远程门诊开始前半小时通知-申请医生'
                        }else if(status == 25){
                            tmpStr = '远程门诊-远程门诊开始前半小时通知-接诊医生'
                        }else if(status == 26){
                            tmpStr = '远程会诊-申请机构配置管理员审批同意后-接诊机构配置管理员'
                        }else if(status == 27){
                            tmpStr = '远程会诊-分诊机构配置管理员分诊后-申请医生'
                        }else if(status == 28){
                            tmpStr = '远程会诊-分诊机构配置管理员分诊后-患者'
                        }else if(status == 29){
                            tmpStr = '远程会诊-分诊机构配置管理员分诊后-接诊医生'
                        }else if(status == 30){
                            tmpStr = '远程会诊-分诊机构配置管理员审批驳回后-申请医生'
                        }else if(status == 31){
                            tmpStr = '远程会诊-远程会诊开始前半小时通知-申请医生'
                        }else if(status == 32){
                            tmpStr = '远程会诊-远程会诊开始前半小时通知-接诊医生-多个'
                        }else if(status == 33){
                            tmpStr = '远程会诊-接诊医生提交会诊建议（由标示会诊主持人的医生）-分诊管理员'
                        }else if(status == 34){
                            tmpStr = '远程会诊-分诊管理员会诊报告审核驳回后-接诊医生（会诊主持）'
                        }else if(status == 35){
                            tmpStr = '远程会诊-分诊管理员会诊报告审核通过后-申请医生'
                        }else if(status == 36){
                            tmpStr = '处方患者支付通知'
                        }else if(status == 37){
                            tmpStr = '初审意见医生拒绝'
                        }else if(status == 38){
                            tmpStr = '药师驳回'
                        }
                        return h('span',{
                        },tmpStr)
                    }
                },
                {title:"模板样例内容",key: "content", align: "center"},
                {title:"模板内容",key: "templateContent",align: "center"},
                {title:"短信code码",key: "templateCode", align: "center"},
                {
                    title: "设置",
                    key: "operate",
                    width: 140,
                    align: "center",
                    render: (h, params) => {
                        return h('div',[
                            h('span', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    margin: '0px 6px',
                                    color: '#5362e1'
                                },
                                on: {
                                    click: () => {
                                        this.modalStatus = true;
                                        this.modalTitle = '编辑短信模板'
                                        this.$axios.post(api.findSmsTemplateById,{id: params.row.id}).then(res => {
                                        if (res.data.code === 1) {
                                            let formdata = res.data.object
                                            this.formValidate = {
                                                id:formdata.id,
                                                content:formdata.content,
                                                templateContent:formdata.templateContent,
                                                title:formdata.title,
                                                templateCode:formdata.templateCode,
                                                type:parseInt(formdata.type)
                                            }
                                        } else {
                                            this.$Message.error(res.data.message);
                                            return false;
                                        }
                                        }).catch(() => {
                                            this.modalStatus = false;
                                        });
                                    }
                                }
                            }, '编辑'),
                            '|',
                                h('span', {
                                    props: {
                                        type:"error",
                                        size: 'small'
                                    },
                                    style: {
                                        margin: '0px 6px',
                                        color: '#fc6c49'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleRemove(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },
            ],
            data: [],
            showDelConfirmModal: false,
            showEditConfirmModal: false,
            curRecord: {},
            formValidate: {
                content : "",
                templateContent:'',
                title : "",
                id : this.$route.query.hospitailId,
                templateCode:'',
                type : null
            },
            ruleValidate:{
                title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                templateContent: [{ required: true, message: '请输入模板内容(禁止修改)', trigger: 'blur' }],
                templateCode: [{ required: true, message: '请输入短信code码', trigger: 'blur' }],
                content: [{ required: true, message: '请输入模板样例内容 ', trigger: 'blur' }],
                type: [{ required: true, message: '请选择模板类型', trigger: 'change',type:'number'}]
            },
            formInline: {
                user: '',
                password: ''
            },
            modalStatus: false,
            modalTitle :"添加短信模板",
            followList:{},
        }
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "",
                title: "消息模板配置"
            },
            {
                path: "/index/configuration/message/shortMessage",
                title: "短信模板"
            }
        ];
        this.$emit("changeBreadList", breadList);
        //获取短信模板类型
        this.$axios.post(api.findSmsTemplateType,{}).then(res => {
            if(res.data.code == 1){
                this.followList = res.data.object
            }else{
                this.$Message.error('请求异常');
                return false;
            }
        });
    },
    mounted() {
        this.getlist()
    },
    methods: {
        selpro(e){ 
            this.followList.map(item =>{
            if(item.smsId == e){
                    this.formValidate.templateContent= item.smsContent
                }
            })
        },
        //消息配置-分页列表
        getlist(){
            this.loading = true;
            // this.filterObj.hospitalId = sessionStorage.getItem('hospitalId'),
            this.$axios.post(api.findSmsTemplatePageList, this.filterObj).then(res => {
                this.loading = false;
                if (res.data.code === 1) {
                    const ret = res.data.object.records;
                    this.data = ret || [];
                    this.count = res.data.object.total;
                    if (!ret || !ret.length) {
                        this.$Message.info('未查询到符合条件的记录')
                    }
                } else {
                    this.$Message.error('请求异常');
                    return false;
                }
            }).catch(() => {
                this.loading = false;
            });
        },
        //列表检索
        smslist() {
            this.loading = true;
            this.$axios.post(api.findSmsTemplateList,this.seachObj).then(res => {
                this.loading = false;
                if (res.data.code === 1) {
                    const ret = res.data.object;
                    this.data = ret || [];
                    this.count = res.data.object.total;
                    if (!ret || !ret.length) {
                        this.$Message.info('未查询到符合条件的记录')
                    }
                } else {
                    this.$Message.error('请求异常');
                    return false;
                }
            }).catch(() => {
                this.loading = false;
            });
        },
        //添加按钮
        addSms(){
            this.modalStatus = true;
            this.modalTitle = '添加短信模板'
            this.formValidate.id = ''
            this.formValidate.content = ''
            this.formValidate.title = ''
            this.formValidate.id = this.$route.query.hospitailId,
            this.formValidate.type = null
            this.formValidate.templateContent = ''
            this.formValidate.templateCode = ''
        },
        //查询
        handleSearch() {
            if(this.filterObj.title == '' && this.filterObj.content == ''){
                this.$Message.error('至少填写一个条件进行检索');
                return false;
            }else{
                this.seachObj.pageNo = 1;
                this.filterObj.pageNo = 1
                this.getlist()
            }
        },
        //清空条件
        Reset(){
            this.filterObj = {
                pageNo: 1,
                pageSize: 10,
                title: '',
                content: '',
                // hospitalId: sessionStorage.getItem('hospitalId'),
                // sortDescs:[
                //     "id"
                // ]
            }
            this.filterObj.pageNo = 1
            this.getlist()
        },
        handleReset (name) {
            this.modalStatus = false;
            this.$refs[name].resetFields();
            this.formValidate.content = ''
            this.formValidate.title = ''
            this.formValidate.id = this.$route.query.hospitailId,
            this.formValidate.type = null
            this.formValidate.templateContent = ''
            this.formValidate.templateCode = ''
        },
        handleRemove(record) {
            this.curRecord = record.row;
            this.showDelConfirmModal = true;
        },
        handleDel() {
            this.smsdelete();
        },
        changePage(index) {
            this.filterObj.pageNo = index;
            this.seachObj.pageNo = index;
            this.getlist()
        },
        // 删除
        smsdelete() {
           this.delBtnLoading = true;
            this.$axios.post(api.delSmsTemplate,{id: this.curRecord.id}).then(res => {
                this.delBtnLoading = false;
                if (res.data.code === 1) {
                    this.$Message.success('删除成功');
                    this.showDelConfirmModal = false;
                    this.getlist(1)
                } else {
                    this.$Message.error({content: res.data.message});
                    return false;
                }
            }).catch(() => {
                this.delBtnLoading = false;
            });
        },
        deepClone(obj) {
            return JSON.parse(JSON.stringify(obj))
        },
        // 保存按钮
        handleSubmit(name){
            this.$refs[name].validate((valid) => {
                if (valid) {
                    let params = { 
                        id:null,
                        hospital: sessionStorage.getItem('hospitalId'),
                        content: this.formValidate.content,
                        title: this.formValidate.title,
                        type: this.formValidate.type,
                        templateCode:this.formValidate.templateCode,
                        templateContent:this.formValidate.templateContent,
                    }
                    if(this.modalTitle == '添加短信模板'){
                        this.$axios.post(api.insertSmsTemplate,params).then(res => {
                            console.log(res)
                            if(res.data.code == 1) {
                                this.handleReset('formValidate')
                                this.getlist(1)
                                this.$Message.success('保存成功')
                            }else{
                                this.$Message.error(res.data.message)
                            }
                        }).catch(() => {
                        });
                    }else{
                        params.id = this.formValidate.id,
                        this.$axios.post(api.updateSmsTemplate,params).then(res => {
                            if(res.data.code == 1) {
                                this.handleReset('formValidate')
                                this.getlist(1)
                                this.$Message.success('修改成功')
                            }else{
                                this.$Message.error(res.data.message)
                            }
                        }).catch(() => {
                        });
                    }
                } else {
                    this.$Message.error('请完整填写必填项!');
                }
            })
        },
    },
    watch: {
        'filterObj.pageSize'(nv, ov) {
            this.filterObj.pageNo = 1;
            this.getlist();
        },
    }
}
</script>
<style scoped lang="less">
.list {
    width: 100%;
    min-width: 1200px;
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    header {
        width: 100%;
        .filter-part {
            display: flex;
            flex-wrap: wrap;
            .filter-item {
                display: flex;
                margin: 10px 10px 10px 0;
                label {
                    white-space: nowrap;
                    line-height: 32px;
                    width: 100px;
                    text-align: center;
                }
                .input {
                    width: 220px;
                }
                .select {
                    width: 170px;
                }
            }
        }
    }
    .page{
        text-align: center;
        margin-top: 20px;
    }
}
.buttonbox {
    text-align: center;
}
/deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>